<template>
    <view class="pages">
        <cinema-components :cinemaModel="cinemaModel" :seatsPrice="seatsPrice" :seatsList="seatsList"></cinema-components>
        <u-gap height="30rpx" bgColor="#f6f6f6"></u-gap>
        <forms-components ref="forms" :form.sync="form"></forms-components>
        <u-gap height="30rpx" bgColor="#f6f6f6"></u-gap>
        <seat-components :form.sync="form"></seat-components>
        <u-gap height="30rpx" bgColor="#f6f6f6"></u-gap>
        <ticket-components :singlePrice="singlePrice" :isPreferTicket="isPreferTicket" :fastPrice="fastPrice" :shengPrice="shengPrice" @change="ticketChange"></ticket-components>
        <u-gap height="30rpx" bgColor="#f6f6f6"></u-gap>

        <pay-components :seatsPrice="seatsPrice" :dedPrice="dedPrice" @click="payClick"></pay-components>
        <x-loading :show="isSync"></x-loading>
        <x-modal ref="modal"></x-modal>
    </view>
</template>

<script>
import { loginByMobile } from '@/sub_pages/movie/common/api/movie.js';
import cinemaComponents from './components/cinema.vue';
import formsComponents from './components/forms.vue';

import seatComponents from './components/seat.vue';
import payComponents from './components/pay.vue';
import ticketComponents from './components/ticket.vue';

import xModal from '@/sub_pages/movie/components/x-modal/x-modal.vue';
import xLoading from '@/sub_pages/movie/components/x-loading/x-loading.vue';

import service from './service.js';
export default {
    components: {
        cinemaComponents,
        formsComponents,
        seatComponents,
        ticketComponents,

        payComponents,

        xModal,
        xLoading,
    },
    data() {
        return {
            form: {
                mobile: '',
                changeSeat: false,
            },

            ticketType: 1, // 1 优惠出票 2特惠出票
            isSync: true,

            seatsList: [], // 选中座位内容
            cinemaModel: {}, // 电影票详情
        };
    },
    computed: {
        seatsPrice() {
            if (getApp().globalData.subcontracting_movie?.$utils?.isCheckEmpty?.(this.seatsList)) return 0;

            return this.cinemaModel?.showPriceTotalPrice;
        },

        shengPrice() {
            return 0;
        },
        singlePrice() {
            // 取最小值
            const min = Math.min(...this.seatsList?.map(item => item.settlementPrice));
            return min || 0;
        },
        fastPrice() {
            // 取最小值
            const min = Math.min(...this.seatsList?.map(item => item.settlementQuickPrice));
            return min || 0;
        },

        isPreferTicket() {
            return service.isPreferTicket(this.cinemaModel);
        },
        dedPrice() {
            if (this.ticketType == 1) {
                // 座位特惠购票结算价格 总价
                return this.cinemaModel.settlementPriceTotalPrice;
            }
            // 座位快捷出票结算价格 总价
            return this.cinemaModel.settlementQuickPriceTotalPrice;
        }
    },

    onLoad(e) {
        this.init();
        this.formInit();
    },
    methods: {
        async init() {
            this.seatsList = getApp().globalData.subcontracting_movie.selectSeat;

            this.cinemaModel = getApp().globalData.subcontracting_movie.beforeSeats;

            try {
                uni.$u.sleep(500).then(() => {
					if (uni.getStorageSync('userInfo')) {
						let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
						this.form.mobile = userInfo.username;
					}
                    this.isSync = false;
                });
            } catch (e) {
                uni.$u.sleep(500).then(() => {
                    this.isSync = false;
                });
            }
        },
        // 初始化表单数据
        formInit() {
            this.form = {
                mobile: '',
                changeSeat: getApp().globalData.subcontracting_movie.isAutoSeat,
            };
        },
        ticketChange(e) {
            this.ticketType = e;
        },
        async payClick() {
            let isTrue = await service.checkForm(this);
            if (isTrue) {
				let res = await loginByMobile(this.form);
				if (res.data) {
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
					getApp().globalData.subcontracting_movie.confirmOrder = service.setProps(this);
					uni.redirectTo({
						url: '/sub_pages/movie/pay/pay',
					});
				}
            }
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.pages {
    padding: 30rpx;
    background-color: #f6f6f6;
}
</style>
